<template>
	<text :id="customIdSync" :class="customClassSync" :style="rootStyle">{{text}}</text>
</template>

<script>
	import Util from '../../js_sdk/util.js'
	import ComponentMixin from '../../js_sdk/componentMixin.js'
	export default {
		mixins: [ComponentMixin],
		props:{
			value:{
				type: [Number, String, Boolean],
				default: ''
			},
			color: {
				type:String,
				default: '#333333'
			},
			selectable: {
				type: Boolean,
				default: false
			},
			size: {
				type: [Number, String],
				default: 24
			},
			lineHeight: {
				type:[Number, String],
				default: ''
			},
			decode: {
				type: String,
				default: ''
			},
			max: {
				type: Number,
				default: -1
			},
			//配合max，超过规定字数是否拼接省略号
			ellipsis: {
				type: Boolean,
				default: false
			},
			//行省略
			lines: {
				type: Number,
				default: 0
			},
			align: {
				type: String,
				default: 'left'
			},
			fontStyle: {
				type:[Number, String],
				default: 'static'
			},
			weight: {
				type: String,
				default: 'none'
			},
			family: {
				type: String,
				default: 'static'
			}
		},
		data () {
			return {
				loading: false
			}
		},
		computed: {
			rootStyle () {
				return this.filterStyle(
					Object.assign({}, {
						color: this.color,
						fontSize: Util.pixelunit(this.size),
						fontWeight: this.weight,
						fontStyle: this.fontStyle,
						fontFamily: this.family,
						'text-align': this.align,
						lineHeight: this.lineHeight ? Util.pixelunit(this.lineHeight) : (Util.unitpixel(this.size) + 4) + 'px'
					}, this.lines > 0 ? {
						// #ifdef APP-NVUE
						lines: this.lines,
						'text-overflow': 'ellipsis'
						// #endif
						// #ifndef APP-NVUE
						display: '-webkit-box !important',
						overflow: 'hidden',
						'text-overflow': 'ellipsis',
						'word-break': 'break-all',
						'-webkit-box-orient':'vertical',
						'-webkit-line-clamp': this.lines
						// #endif
					} : {})
				) + this.customStyleSync
			},
			text () {
				return this.max > -1 ? this.value.slice(0, this.max) + (this.value.length > this.max && this.ellipsis ? '...' : '') : this.value
			}
		}
	}
</script>

<style>
</style>
